// 绘制自定义文字

import Block from "./Block";
import GridSystem from "../GridSystem";
import { BlockType } from "../Constants";

class MyText extends Block {

    background: string;
    customDraw: Function;
    constructor(x: number, y: number, width: number, height: number, customDraw: Function) {
        super(x, y, width, height);
        this.class = BlockType.CUSTOM;
        this.background = "transparent";
        this.customDraw = customDraw;
    }

    draw(x: number, y: number, width: number, height: number): void {
        let ctx = GridSystem.gls.ctx;
        ctx.save()
        let { x: x1, y: y1 } = this.setAdsorption(x, y, width, height)
        x = x1;
        y = y1;
        this.setAngle(x, y, width, height)
        this.setSizeInfo(x, y, width, height)
        this.drawRect(x, y, width, height, this.background)

        this.customDraw(ctx, x, y, width, height);   // 暴露上下文,你自己去绘制

        ctx.restore()
        // this.setFocusStyle();
        this.setControlPoints(x, y, width, height);
        this.isDraged = false;
        this.drawLink(x, y, width, height);
        this.update(x, y, width, height)
    }

    drawText(x: number, y: number, w: number) {
        let ctx = GridSystem.gls.ctx;
        var chr = this.text.split("");
        var temp = "";
        var row = [];

        ctx.font = "20px Arial";
        ctx.fillStyle = "black";
        ctx.textBaseline = "middle";

        for (var a = 0; a < chr.length; a++) {
            if (ctx.measureText(temp).width < w) {
                ;
            }
            else {
                row.push(temp);
                temp = "";
            }
            temp += chr[a];
        }

        row.push(temp);

        for (var b = 0; b < row.length; b++) {
            ctx.fillText(row[b], x, y + (b + 1) * 20);
        }
    }
}

export default MyText;